<template>
  <el-card class="container">
    <template #header>
      <div class="card-header">
        <span>文章分类</span>
        <el-button type="primary" :icon="Plus" @click="addCategory">添加分类</el-button>
      </div>
    </template>
    <el-table :data="categorys" border style="width: 100%">
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column prop="categoryName" label="分类名称" width="180" align="center" />
      <el-table-column prop="categoryAlias" label="分类别名" align="center" />
      <el-table-column prop="createTime" label="创建时间" width="190" align="center" />
      <el-table-column prop="updateTime" label="修改时间" width="190" align="center" />
      <el-table-column label="操作" width="160" align="center">
        <!-- TODO：这里的#xxx="xxx"的作用是啥【已解决】 -->
        <!-- options.row:当前行数据     options.index:当前行索引 -->
        <template #default="options">
          <el-button type="primary" circle :icon="Edit" @click="updateCategory(options.row)"></el-button>
          <!-- <el-button type="danger" circle :icon="Delete" @click="deleteCategory(options)"></el-button> -->
          <el-popconfirm :title="`你确定删除${options.row.categoryName}吗？`" width="200px"
            :icon="Delete">
            <template #reference>
              <el-button type="danger" circle :icon="Delete"></el-button>
            </template>
            <template #actions="{ confirm, cancel }">
              <el-button size="small" @click="cancel">取消</el-button>
              <el-button type="danger" size="small" @click="deleteCategory(options)">确定</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- TODO：分页器按需显示 -->
    <template #footer>分页器待设【后边有时间再完善嘻嘻~】</template>

    <!-- 添加分类弹框 -->
    <!-- v-model:是否显示diaLog -->
    <el-dialog v-model="dialogFormVisible" title="文章分类" width="500">
      <el-form ref="dialogForm" :model="categoryData" :rules="rules" label-width="80px">
        <el-form-item label="分类名称" prop="categoryName">
          <el-input autocomplete="off" v-model="categoryData.categoryName" />
        </el-form-item>
        <el-form-item label="分类别名" prop="categoryAlias">
          <el-input autocomplete="off" v-model="categoryData.categoryAlias" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="confirm">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup>
import { categoryAddApi, categoryDeleteApi, categoryDetailApi, categoryListApi, categoryUpdateApi } from '@/api/category';
import { Delete, Edit, Plus } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { nextTick, onMounted, reactive, ref } from 'vue';

const dialogFormVisible = ref(false)



// 文章分类数据
const categoryData = reactive({
  id: '',
  categoryName: '',
  categoryAlias: ''
})

// 获取表单对象
const dialogForm = ref()
// 为自定义规则中的【至少修改名称或别名中的一个】而添设的原始数据对象
const originalData = reactive({})

// TODO:自定义规则校验不通过时只在Name属性框下报红不美观也不怎么正确【待优化】
// 自定义校验规则
const validateName = (rule,value,callback) => {
  if (value === categoryData.categoryName && categoryData.categoryAlias === originalData.categoryAlias){
    ElMessage.error('至少修改名称或别名中的一个')
    callback(new Error())
  }else {
    callback()
  }
}
// 这里定义两个相同的校验规则会有校验冲突，相互干扰！
// const validateAlias = (rule,value,callback)=>{
//   if (value === categoryData.categoryAlias && categoryData.categoryName === originalData.categoryName) {
//     // ElMessage.error('至少修改名称或别名中的一个')
//     callback(new Error())
//   } else {
//     callback()
//   }
// }
// 参数校验
const rules = {
  categoryName: [
    { required: true, message: '分类名称不能为空', trigger: 'change' },
    { validator: validateName, trigger: 'blur' }
  ],
  categoryAlias: [
    { required: true, message: '分类别名不能为空', trigger: 'change' },
    // { validator: validateAlias, trigger: 'blur' }
  ]
}

// const categorys = ref([
//   {
//     "id": 3,
//     "categoryName": "美食",
//     "categoryAlias": "my",
//     "createTime": "2023-09-02 12:06:59",
//     "updateTime": "2023-09-02 12:06:59"
//   },
//   {
//     "id": 4,
//     "categoryName": "娱乐",
//     "categoryAlias": "yl",
//     "createTime": "2023-09-02 12:08:16",
//     "updateTime": "2023-09-02 12:08:16"
//   },
//   {
//     "id": 5,
//     "categoryName": "军事",
//     "categoryAlias": "js",
//     "createTime": "2023-09-02 12:08:33",
//     "updateTime": "2023-09-02 12:08:33"
//   }
// ])
const categorys = reactive([])

// 获取文章分类列表数据方法
const categoryList = async () => {
  let res = await categoryListApi()
  // TODO：Object.assign的弊端【待解决】
  // 如此处【当删除文章分类时不能及时更新界面数据】
  // Object.assign(categorys, res.data)
  categorys.splice(0, categorys.length, ...res.data)
}
// 清除表单数据方法
const clearCategoryData = () => {
  // Object.assign(categoryData,{})这里并不能把categoryData中的原有属性给替换，而是把{}中的属性赋给categoryData,而categoryData中原有的属性仍在
  Object.assign(categoryData, {
    id: '',
    categoryName: '',
    categoryAlias: ''
  })
  // categoryData.id = undefined
  // categoryData.categoryAlias = ''
  // categoryData.categoryName = ''
}
// 添加分类按钮
const addCategory = () => {
  dialogFormVisible.value = true
  // 清除表单数据
  // TODO:取消初始点击添加按钮时的表单校验
  clearCategoryData()
  nextTick(() => {
    setTimeout(() => {
      dialogForm.value.clearValidate('categoryName')
      dialogForm.value.clearValidate('categoryAlias')
    }, 0)
    // 法二：既清除表单内容，也清除表单校验信息
    // dialogForm.value.resetFields()
  })
}
// onMounted(categoryList())写法不正确的原因：生命周期接收的是回调函数，这里的实质是将categoryList的返回值作为参数,除非categoryList返回的是一个函数
onMounted(() => categoryList())

// 添加or修改
const confirm = async () => {
  // TODO:重点标注
  // dialogForm.value.validate(async (valid) => {
  //   if (valid) {
  //     // 校验通过
  //     dialogFormVisible.value = false
  //     // 发送新增请求
  //     await categoryAddApi(categoryData)
  //     ElMessage.success("添加分类成功")
  //     // 新增成功后需重新获取分类列表
  //     categoryList()
  //   } else {
  //     // 校验未通过
  //     console.log("表单校验未通过！")
  //   }
  // })
  // 表单校验全都通过才会执行后边的代码
  await dialogForm.value.validate()
  if(categoryData.id){
    console.log("修改数据")
    await categoryUpdateApi(categoryData)
    ElMessage.success("修改分类成功")
  }else {
    await categoryAddApi(categoryData)
    ElMessage.success("添加分类成功")
  }
  dialogFormVisible.value = false
  // 新增or修改成功后需重新获取分类列表
  categoryList()
}
// 删除文章分类方法
const deleteCategory = async (options) => {
  // console.log(options.row.id)
  await categoryDeleteApi(options.row.id)
  ElMessage.success('删除分类成功')
  // 删除成功需重新请求列表数据
  await categoryList()
}
// 修改分类数据
const updateCategory = async (row) => {
  dialogFormVisible.value = true
  // 让表单展示当前数据信息
  Object.assign(categoryData, row)
  // // 表单校验全都通过才会执行后边的代码
  // await dialogForm.value.validate()
  // await categoryUpdateApi(categoryData)
  await getDetail(row.id)
}
// 获取某个分类详情数据
const getDetail = async (id)=>{
  let res = await categoryDetailApi(id)
  Object.assign(originalData,res.data)
}
</script>

<style scoped lang="scss">
.container {
  height: 100%;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>